<template>
    <div>
        <a-card class="searchForm mb-twelve">
            <a-button type="primary" @click="visible=true"> 高级搜索 </a-button>
        </a-card>
        <div class="list">
            <a-row :gutter="[16, 16]">
                <a-col :span="12" v-for="(item, index) in keys" :key="index">
                    <a-card>
                        <div class="flex align-center justify-between flex-wrap card-hr">
                            <div class="a-card-title">{{item.split('_')[1]}}</div>
                            <div>
                            </div>
                        </div>
                        <div class="echarts" :id="'line' + index" ></div>
                    </a-card>
                </a-col>
            </a-row>
        </div>
        <div style="text-align: center;padding-bottom: 20px;" v-if="total > 0">
            <a-pagination :total="total" :current="searchForm.page" :page-size.sync="searchForm.pageSize"
                :page-size-options="$pageSizeOptions" @change="handlePageNo" @showSizeChange="showSizeChange"
                 />
        </div>
        <a-modal title="高级搜索" v-model="visible" :maskClosable="false" :width="790" centered :footer="null">
            <div class="search-box beauty-scroll">

                <div v-for="(item, index) in searchData" :key="index">
                    <a-form-model :colon="false" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                        <a-row :gutter="16">
                            <a-col :span="11">
                                <a-form-model-item label="时间搜索" prop="date">
                                    <a-range-picker v-model="item.date" style="width: 100%;">
                                        <a-icon slot="suffixIcon" type="calendar" />
                                    </a-range-picker>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="11">
                                <a-form-model-item label="设备" prop="deviceId">
                                    <a-select v-model="item.deviceId" placeholder="请选择设备" allowClear style="width:100%">
                                        <a-select-option v-for="(num, numIdx) in 2" :value="num" :key="numIdx">
                                            {{ num }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="2" v-if="index!=0">
                                <a-form-model-item>
                                    <img @click="handleReduce(item)" class="search_img" src="@/assets//img/icon-reduce.png"
                                        style="width: 32px;height: 32px;margin-top: 4px;" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-form-model>
<!--                    {{index}}-->
                    <div class="search">
                        <div class="search-title"> 理化指标 </div>
                        <checked-list :idx="index" :data="item.indexList" @changeChecked="changeIndex" @onCheckAlls="onCheckAllChangeIndex"></checked-list>

                    </div>
                    <div class="search">
                        <div class="search-title"> 磨粒分布 </div>
                        <checked-list :idx="index" :data="item.distributionList" @changeChecked="changeDistribution" @onCheckAlls="onCheckAllChangeDistribution"></checked-list>
                    </div>
                </div>
            </div>
            <div class="flex align-center justify-center">
                <img @click="handleAdd" class="search_img" src="@/assets//img/icon-add.png" />
            </div>
          <div class="flex align-center justify-center" style="margin-top: 20px">
            <a-button @click="visible = false"
                      style="margin-left: 8px;background: #fff;color: #2C3360;border-color: #fff;margin-right: 15px">取消</a-button>
            <a-button @click="getData" type="primary">确定</a-button>
          </div>
        </a-modal>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import checkedList from './components/checked-list.vue'
// import {dataSource as ds} from "@/services";
import {getSensorsDateManage} from "@/services/device";
export default {
    components: { checkedList },
    name: "datas",
    data() {
        return {
            searchForm: {
                page: 1,
              pageSize: 4
            },
            total: 0,
            visible: false,
          list:[],
            form: {},
          keys:[],
            searchData: [ ],
            tempFrom:{
                    date: [],
                    deviceId: undefined,
                    indexList:
                    [{
                        indeterminate: false,
                        checkAll: false,
                        allChecked: [],
                        child: [
                            { title: "温度", flag: false, id: 1001001 },
                            { title: "粘度", flag: false, id: 1001002 },
                            { title: "密度", flag: false, id: 1001003 },
                            { title: "常电介数", flag: false, id: 1001004 },
                            { title: "水活性", flag: false, id: 1001005 },
                            { title: "含水量", flag: false, id: 1001006 },
                            { title: "含水率", flag: false, id: 1001007 }
                        ]
                    }]
                    ,
                    distributionList: [
                        {
                            title: "铁磁颗粒", flag: false, id: 2001,
                            indeterminate: false,
                            checkAll: false,
                            allChecked: [],
                            child: [
                                { title: "A：70-90μm", flag: false, id: 2001001 },
                                { title: "B：90-110μm", flag: false, id: 2001002 },
                                { title: "C：110-140μm", flag: false, id: 2001003 },
                                { title: "D：140-170μm", flag: false, id: 2001004 },
                                { title: "E：170-200μm", flag: false, id: 2001005 },
                                { title: "F：200-230μm", flag: false, id: 2001006 },
                                { title: "G：230-280μm", flag: false, id: 2001007 },
                                { title: "H：280-350μm", flag: false, id: 2001008 },
                                { title: "I：350-420μm ", flag: false, id: 2001009 },
                                { title: "J：>420μm ", flag: false, id: 2001010 }
                            ]
                        },
                        {
                            title: "非铁磁颗粒", flag: false, id: 2002,
                            indeterminate: false,
                            checkAll: false,
                            allChecked: [],
                            child: [
                                { title: "A：260-530μm", flag: false, id: 2002001 },
                                { title: "B：530-1060μm", flag: false, id: 2002002 },
                                { title: "C:1060-2160μm", flag: false, id: 2002003 },
                                { title: "D：>2160μm", flag: false, id: 2002004 },
                            ]
                        },
                        {
                            title: "颗粒度分布", flag: false, id: 2003,
                            indeterminate: false,
                            checkAll: false,
                            allChecked: [],
                            child: [
                                { title: "＜5μm 颗粒数", flag: false, id: 2003001 },
                                { title: "5-10μm颗粒数", flag: false, id: 2003002 },
                                { title: "10-50μm颗粒数", flag: false, id: 2003003 },
                                { title: "50-100μm颗粒数", flag: false, id: 2003004 },
                                { title: ">100μm颗粒数", flag: false, id: 2003005 }
                            ]
                        },
                    ]
                },
        }
    },

    mounted() {
        this.searchData = []
        let obj = this.tempFrom
        obj['key'] = Date.now()
        this.searchData.push(obj)
        this.getData();

    },
    methods: {
      getData() {

        let datas={
          pageNum:this.searchForm.page
        }
        getSensorsDateManage(datas).then((res) => {
          console.log(res)
		 // let fielres = res.filter(item=>item)
		// let filteredData = Object.keys(res).filter(key => key.includes("snesorName")&&(res.key.size()>0));
		 console.log("filteredData======");
		 //console.log(filteredData);
          let keys = Object.keys(res);
          this.keys=keys.filter(key => key !== 'totalpages');
          setTimeout(()=>{
            for(let i in this.keys){
              this.getInit(i,res[this.keys[i]],this.keys[i])
            }
          },500)
          this.total =Number(res.totalpages.totalPages)*this.searchForm.pageSize
          this.$forceUpdate()
        }).catch(() => {

        });
      },
        handleReduce(item){
            let index = this.searchData.indexOf(item);
            if (index !== -1) {
                this.searchData.splice(index, 1);
            }
            this.$forceUpdate()
        },
        handleAdd(){
            let obj = this.tempFrom
            obj['key'] = Date.now()
            this.searchData.push(obj)
        },
        changeDistribution(params){
            let checkedList = params.checkedList
            let index = params.index
            let idx = params.idx
            this.$set(this.searchData[idx].distributionList[index],'indeterminate',!!checkedList.length && checkedList.length < this.searchData[idx].distributionList[index].child.length)
            this.$set(this.searchData[idx].distributionList[index],'checkAll',checkedList.length === this.searchData[idx].distributionList[index].child.length)
            this.$forceUpdate()
        },
        onCheckAllChangeDistribution(params){
            let checkAll = params.checkAll
            let index = params.index
            let idx = params.idx
            this.$set(this.searchData[idx].distributionList[index],'allChecked',checkAll? this.searchData[idx].distributionList[index].child.map(el => { return el.id }) : [])
            this.$set(this.searchData[idx].distributionList[index],'indeterminate',false)
            this.$set(this.searchData[idx].distributionList[index],'checkAll',checkAll)
            this.$forceUpdate()
            console.log(this.searchData)
        },
        changeIndex(params) {
            let checkedList = params.checkedList
            let index = params.index
            let idx = params.idx
            this.$set(this.searchData[idx].indexList[index],'indeterminate',!!checkedList.length && checkedList.length < this.searchData[idx].indexList[index].child.length)
            this.$set(this.searchData[idx].indexList[index],'checkAll',checkedList.length === this.searchData[idx].indexList[index].child.length)
            this.$forceUpdate()
        },
        onCheckAllChangeIndex(params) {
            let checkAll = params.checkAll
            let index = params.index
            let idx = params.idx
            this.$set(this.searchData[idx].indexList[index],'allChecked',checkAll? this.searchData[idx].indexList[index].child.map(el => { return el.id }) : [])
            this.$set(this.searchData[idx].indexList[index],'indeterminate',false)
            this.$set(this.searchData[idx].indexList[index],'checkAll',checkAll)
            this.$forceUpdate()
        },
        getInit(t,data) {
          let date=[];
          let temper=[];
          let vis=[];
          let dens=[];
          let diel=[];
          let ppm=[];
          for(let i in data){
            date.push(data[i].create_time);
            temper.push(data[i].temper);
            vis.push(data[i].vis);
            dens.push(data[i].dens);
            diel.push(data[i].diel);
            ppm.push(data[i].ppm);
          }
            var myChart = echarts.init(document.getElementById('line'+t))
            var option;
            option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    textStyle: {
                        color: '#DADDED' // 这里设置图例的字体颜色为红色
                    },
                    data:  ['温度(℃)', '密度(Kg/m³)', '粘度(Cst)', '介电常数(F/m)', '含水量(%)']
                },
                grid: {
                    left: '6%',
                    right: '8%',
                    bottom: '3%',
                    containLabel: true
                },
              dataZoom: [
                {
                  type: 'slider',
                  show: true
                }
              ],
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#DADDED'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(150, 162, 231, 0.2)', // 这里设置你想要的颜色
                        }
                    },
                    data: date
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#DADDED'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            // type: 'dashed',
                            borderWidht: 1,
                            color: "rgba(150, 162, 231, 0.2)"
                        }

                    },
                },
                series: [
                  {
                    name: '温度(℃)',
                    type: 'line',
                    symbol: 'none',
                    data: temper
                  },
                  {
                    name: '密度(Kg/m³)',
                    type: 'line',
                    symbol: 'none',
                    data: dens
                  },
                  {
                    name: '粘度(Cst)',
                    type: 'line',
                    symbol: 'none',
                    data: vis
                  },
                  {
                    name: '介电常数(F/m)',
                    type: 'line',
                    symbol: 'none',
                    data: diel
                  },
                  {
                    name: '含水量(%)',
                    type: 'line',
                    symbol: 'none',
                    data: ppm
                  }
                ]
            };

            option && myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },
        showSizeChange(current, pageSize) {
            this.searchForm.pageSize = pageSize
          this.getData();
        },
        handlePageNo(current) {
            this.searchForm.page = current
          this.getData();
        },
    }
}
</script>
<style scoped lang="less">
.echarts{
  width: 100%;height: 380px;
}
.list {
    margin-bottom: 20px;
  //min-height: 700px;
}

.search-box {
    max-height: 65vh;
    overflow-y: scroll;
    margin-bottom: 20px;
}

.search_img {
    width: 36px;
    height: 36px;
    cursor: pointer;
}

.search {
    font-size: 14px;
    color: #E2E5FF;
    border-bottom: 1px solid rgba(220, 229, 236, 0.3);
    padding-bottom: 18px;
    margin-bottom: 18px;
    box-sizing: border-box;

    &-title {
        font-weight: bold;
        margin-bottom: 10px;
    }

    &-check {
        padding-left: 20px;
    }
}

.search:last-child {
    margin-bottom: 38px;
}

/deep/ .ant-checkbox {
    .ant-checkbox-inner {
        border: 1px solid #CEDAE0;
        background-color: #ffffff;
    }
}

// 设置选中的颜色
/deep/ .ant-checkbox-checked .ant-checkbox-inner,
/deep/ .ant-checkbox-indeterminate .ant-checkbox-inner {
    background-color: #3987EB;
    border: none;
}

/deep/ .ant-checkbox-indeterminate .ant-checkbox-inner {
    background-color: #ffffff;
}

/deep/ .ant-checkbox-indeterminate .ant-checkbox-inner:after {
    background-color: #3987EB;
}

/deep/.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/ .ant-pagination-item {
    background-color: #42487A;
    border-color: #999da0;

}

/deep/ .ant-pagination-item a {
    color: #898a94;
}

/deep/ .ant-pagination-item-active {
    border-color: #fff;
}

/deep/ .ant-pagination-item-active a {
    color: #fff;
}

/deep/ .ant-select-selection {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}
</style>
